<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小球的落地</title>
	</head>
	<body>
		<canvas id="myCanvas" width="1200" height="600"></canvas>
			<script type="text/javascript">
				var canvas=document.getElementById("myCanvas");
				var ctx =canvas.getContext("2d");
				ctx.fillStyle="red";
				ctx.fillRect(0,0,1400,750);
				var arcX=50;
				var arcY=50;
				var arvR=5;
				var l1=5;
				var t1=5;
				var arcX2=50;
				var arcY2=50;
				var arvR2=20;
				var l2=10;
				var t2=5;
				setInterval(function(){
					ctx.fillStyle="rgba(0,255,0,0.01)"
					ctx.fillRect(0,0,1200,600);
					ctx.beginPath();
					ctx.fillStyle="red";
					ctx.arc(arcX,arcY,arvR,0,2*Math.PI);
					ctx.fill();
					arcX=arcX+l1;
					arcY=arcY+t1;
					if(arcY>600-arvR||arcY<arvR){
						t1=-t1;
					}
					if(arcX>1200-arvR||arcX<arvR){
						l1=-l1;
					}
					/*第二个球*/
					ctx.beginPath();
					ctx.fillStyle="grey";
					ctx.arc(arcX2,arcY2,arvR2,0,2*Math.PI);
					ctx.fill();
					arcX2=arcX2+l2;
					arcY2=arcY2+t2;
					if(arcY2>600-arvR2||arcY2<arvR2){
						t2=-t2;
					}
					if(arcX2>1200-arvR2||arcX2<arvR2){
						l2=-l2;
					}
				},1)
			</script>
		
	</body>
</html>
